﻿@page
@{ Layout = "_Layout"; }

<template v-if="pageType == 'selectType'">
  <el-alert>
    欢迎使用创建新站点向导，请选择创建站点的方式
  </el-alert>
  <div style="height: 10px"></div>

  <el-button v-on:click="btnCreateEmptyClick" plain size="small" type="primary">创建空站点</el-button>
  <p class="tips">
    点击按钮创建空站点，站点的栏目、内容及模板需要手动添加
  </p>
  <el-button v-on:click="btnLocalClick()" v-if="siteTemplates && siteTemplates.length > 0" plain size="small" type="primary">使用本地站点模板创建站点</el-button>
  <p class="tips" v-if="siteTemplates && siteTemplates.length > 0">
    点击按钮从本地站点模板中选择并创建站点
  </p>
  <el-button v-on:click="btnCloudClick()" plain size="small" type="primary">使用在线站点模板创建站点</el-button>
  <p class="tips">
    点击按钮从官网模板中心中选择并创建站点
  </p>
</template>

<template v-else-if="pageType == 'selectLocal'">
  <el-alert>
    选中站点模板后点击创建站点按钮开始创建站点
  </el-alert>
  <div style="height: 10px"></div>

  <el-table :data="siteTemplates" style="width: 100%">
    <el-table-column prop="siteTemplateName" label="站点模板名称"></el-table-column>
    <el-table-column prop="directoryName" label="站点模板文件夹"></el-table-column>
    <el-table-column prop="description" label="站点模板介绍"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-link
          :underline="false"
          v-on:click="btnCreateLocalClick(scope.row.directoryName)"
          type="primary">
          创建站点
        </el-link>
      </template>
    </el-table-column>
  </el-table>
</template>

<template v-else-if="pageType == 'selectCloud'">
  <el-alert>
    选中站点模板后点击创建站点按钮开始创建站点
  </el-alert>
  <div style="height: 10px"></div>

  <el-row>
    <el-col :span="20">
      <el-form :inline="true" size="mini">
        <el-form-item label="价格">
          <el-select v-on:change="priceChanged" v-model="price">
            <el-option value="" label="全部"></el-option>
            <el-option value="false" label="免费模板"></el-option>
            <el-option value="true" label="收费模板"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序">
          <el-select v-on:change="orderChanged" v-model="order">
            <el-option value="" label="默认"></el-option>
            <el-option value="UpdatedDate" label="更新时间"></el-option>
            <el-option value="AddDate" label="上传时间"></el-option>
            <el-option value="Price" label="价格"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="word" style="width:200px" placeholder="请输入关键字..."></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :underline="false" type="primary" v-on:click="btnRedirectClick(getUrl(page, word, tag, price, order))">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="4" align="right">
      <el-link :underline="false" type="primary" target="_blank" :href="getTemplatesUrl()">官网模板中心</el-link>
    </el-col>
  </el-row>
  <el-row>
    <el-tag
      type="success"
      style="cursor: pointer; margin: 0 3px 6px 0;"
      v-on:click="btnRedirectClick(getTagUrl(''))"
      :effect="!tag ? 'dark' : 'plain'">
      全部
    </el-tag>
    <el-tag
      v-for="tagName in tags"
      :key="tagName"
      type="success"
      style="cursor: pointer; margin: 0 3px 6px 0;"
      v-on:click="btnRedirectClick(getTagUrl(tagName))"
      :effect="tag == tagName ? 'dark' : 'plain'">
      {{ tagName }}
    </el-tag>
  </el-row>

  <div style="height: 10px"></div>

  <el-row>
    <el-col :span="6" v-for="(theme, index) in themes" :key="index">
      <el-card style="margin-bottom: 15px; margin-right: 15px;" :body-style="{ padding: '0px', textAlign: 'center' }">
        <el-image 
          style="width: 100%; min-height: 120px; max-height: 240px; cursor: pointer;"
          v-on:click="btnImageClick(theme)"
          :src="getCoverUrl(theme)">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
        <div style="padding: 14px;">
          <div :title="theme.summary">{{ theme.name }}</div>
          
          <div style="margin-top: 10px;">
            <el-button plain type="info" v-on:click="btnPreviewClick(theme)" size="mini" icon="el-icon-view" style="margin: 0 5px;">预览站点</el-button>
            <el-button plain type="primary" v-if="theme.price === 0" v-on:click="btnCreateCloudClick(theme.userName, theme.name)" size="mini" icon="el-icon-circle-plus" style="margin: 0 5px;">
              创建站点
            </el-button>
            <el-button plain type="primary" v-else v-on:click="btnBuyClick(theme)" size="mini" icon="el-icon-s-goods" style="margin: 0 5px;">
              购买并导入
            </el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>

  <el-divider></el-divider>
  <div style="height: 10px"></div>

  <el-row align="center">
    <el-col :span="24" align="center">
      <el-pagination
        background
        layout="prev, pager, next"
        v-on:current-change="handlePageChange"
        :current-page="page"
        :page-size="12"
        :total="count">
      </el-pagination>
    </el-col>
  </el-row>

</template>

<template v-else-if="pageType == 'submit'">

  <el-alert v-if="this.form.createType == 'cloud'">
    使用在线站点模板创建站点，站点模板：<el-link size="mini" type="primary" :underline="false" :href="this.getDisplayUrl(this.form.cloudThemeUserName, this.form.cloudThemeName)" target="_blank">{{ this.form.cloudThemeName }}</el-link>
  </el-alert>
  <el-alert v-else-if="this.form.createType === 'local'">
    使用本地站点模板创建站点，站点模板：{{this.form.localDirectoryName}}
  </el-alert>
  <el-alert v-else="this.form.createType">
    创建空站点（不使用站点模板）
  </el-alert>

  <div style="height: 10px"></div>

  <el-form size="small" ref="form" :model="form" label-width="150px">
    <el-form-item label="站点名称" prop="siteName" :rules="{ required: true, message: '请输入站点名称' }">
      <el-input v-model="form.siteName" placeholder="请输入站点名称"></el-input>
    </el-form-item>
    <el-form-item label="站点类型" prop="siteType" :rules="{ required: true, message: '请选择站点类型' }">
      <el-select v-model="form.siteType" placeholder="请选择站点类型">
        <el-option
          v-for="siteType in siteTypes"
          :key="siteType.id"
          :label="siteType.text"
          :value="siteType.id"></el-option>
      </el-select>
      <div class="tips">不同的站点类型拥有独立的表结构与管理菜单</div>
    </el-form-item>
    <el-form-item v-if="!rootExists" label="站点级别" prop="root" :rules="{ required: true, message: '请选择站点级别' }">
      <el-radio-group v-model="form.root">
        <el-radio :label="true">主站</el-radio>
        <el-radio :label="false">子站</el-radio>
      </el-radio-group>
      <div class="tips">主站文件夹路径为系统根目录</div>
    </el-form-item>
    <el-form-item v-if="!form.root" label="上级站点">
      <el-cascader
        ref="parentIds"
        v-model="parentIds"
        :options="sites"
        :props="{ checkStrictly: true }"
        filterable
        placeholder="请选择上级站点">
      </el-cascader>
    </el-form-item>
    <el-form-item v-if="!form.root" label="文件夹名称" prop="siteDir" :rules="{ required: true, message: '请输入文件夹名称' }">
      <el-input v-model="form.siteDir" placeholder="请输入文件夹名称"></el-input>
      <div class="tips">实际在服务器中保存此网站的文件夹名称，此路径必须以英文或拼音命名</div>
    </el-form-item>
    <el-form-item v-if="form.siteType === 'default'" label="内容表" prop="tableRule" :rules="{ required: true, message: '请选择内容表' }">
      <el-radio-group v-model="form.tableRule">
        <el-radio label="Choose">选择内容表</el-radio>
        <el-radio label="Create">创建新的内容表</el-radio>
        <el-radio label="HandWrite">指定内容表</el-radio>
      </el-radio-group>
      <div v-if="form.tableRule == 'Create'" class="tips">系统将创建内容表，表名称为 <strong>siteserver_&lt;随机字符串&gt;</strong></div>
    </el-form-item>
    <el-form-item v-if="form.siteType === 'default' && form.tableRule == 'Choose'" label="选择内容表" prop="tableChoose" :rules="{ required: true, message: '请选择内容表' }">
      <el-select v-model="form.tableChoose" placeholder="请选择内容表">
        <el-option
          v-for="tableName in tableNameList"
          :key="tableName"
          :label="tableName"
          :value="tableName"></el-option>
      </el-select>
      <div class="tips">请选择已存在的内容表</div>
    </el-form-item>
    <el-form-item v-else-if="form.siteType === 'default' && form.tableRule == 'HandWrite'" label="指定内容表" prop="tableHandWrite" :rules="{ required: true, message: '请输入指定内容表' }">
      <el-input v-model="form.tableHandWrite" placeholder="请输入指定内容表"></el-input>
      <div class="tips">请输入内容表名称，系统将检测数据库是否已存在指定的内容表，如果不存在系统将创建此内容表</div>
    </el-form-item>

    <el-form-item v-if="form.createType == 'local' || form.createType == 'cloud'" label="站点模板导入选项">
      <el-checkbox v-model="form.isImportContents">导入栏目及内容</el-checkbox>
      <el-checkbox v-model="form.isImportTableStyles">导入表虚拟字段</el-checkbox>
    </el-form-item>

    <el-divider></el-divider>
    <div style="height: 10px"></div>
    <el-form-item>
      <el-button type="primary" v-on:click="btnSubmitClick" size="small">创建站点</el-button>
      <el-button size="small" v-on:click="btnCancelClick">返 回</el-button>
    </el-form-item>

  </el-form>
</template>

<template v-else-if="pageType == 'process'">
  <div style="margin: 1em 2em 2em 2em;">
    <div style="padding: 5px;">任务完成:
      <font id="prgressBarPercetage" v-html="parseInt(current * 100 / total) + ''">0</font>%
    </div>
    <div style="width: 350px; height: 25px;  background: #eee;">
      <div :style="{width: parseInt(current * 350 / total) + 'px'}" style="width: 0; height: 25px; background: #00b19d;"></div>
    </div>
    <div class="tips" style="margin: 5px">{{message || '任务初始化...'}}</div>
  </div>
</template>

@section Scripts{
  <script src="/sitefiles/assets/js/admin/settings/sitesAdd.js" type="text/javascript"></script>
}